<template>
  <div style="width: 900px;margin-left: 10px">
    <div style="position: absolute; top: 50%; right: 20px; transform: translateY(-50%); ">
      <div style="margin-bottom: 20px;">审批流程</div>
      <div style="height: 600px;">
        <el-steps direction="vertical" :active="activeStep" finish-status="success" align-center>
          <el-step title="订单创建" icon="el-icon-edit">
            <template #description>
              <div class="custom-description" style=" display: flex;">
                <div style="margin-right: 30px">
                <span>该订单由{{order.employee.adminName}}创建</span></div>
                <div>
                <span ><i class="el-icon-time">{{order.createTime}}</i></span>
                </div>
              </div>
            </template>
          </el-step>
          <el-step :title="activeStep == 1  ? '待初审' : '初审已通过'" >
            <template #description>
              <div class="custom-description" >
                <div class="step-row">
                  <table class="processing_content">
                    <tr>
                      <td style="color:#98A6BE; display: flex;">
                        <div class="processing_content_detail" style="margin-right: 30px;">
                          <span>审核人&nbsp;&nbsp;<span style="color:#219AFF">{{ getReviewerNameById(orderStep.juniorReviewer) }}</span></span>
                        </div>
                        <div class="processing_content_detail">
                          <span><i class="el-icon-time">{{ orderStep.juniorReviewerTime }}</i></span>
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <div class="processing_content_detail" style="float:left;width:70%">
                          <div style="float:left;width: 2px;height: 20px; background:#C7D4E9;margin-left:10px;margin-right:10px"></div>
                          <span style="color:#919FB8">{{orderStep.juniorReviewerNotes }}</span>
                        </div>
                      </td>
                    </tr>
                  </table>
                </div>

              </div>
          </template>
          </el-step>
          <el-step :title="activeStep == 2  ? '待复审' : '复审已通过'" ><template #description>
            <div class="custom-description" >
              <div class="step-row">
                <table class="processing_content">
                  <tr>
                    <td style="color:#98A6BE; display: flex;">
                      <div class="processing_content_detail" style="margin-right: 30px;">
                        <span>审核人&nbsp;&nbsp;<span style="color:#219AFF">{{ getReviewerNameById(orderStep.intermediateReviewer) }}</span></span>
                      </div>
                      <div class="processing_content_detail">
                        <span><i class="el-icon-time">{{orderStep.intermediateReviewerTime }}</i></span>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <div class="processing_content_detail" style="float:left;width:70%">
                        <div style="float:left;width: 2px;height: 20px; background:#C7D4E9;margin-left:10px;margin-right:10px"></div>
                        <span style="color:#919FB8">{{ orderStep.intermediateReviewerNotes }}</span>
                      </div>
                    </td>
                  </tr>
                </table>
              </div>

            </div>
          </template></el-step>
          <el-step :title="activeStep == 3 ? '待终审' : '终审已通过'" ><template #description>
            <div class="custom-description" >
              <div class="step-row">
                <table class="processing_content">
                  <tr>
                    <td style="color:#98A6BE; display: flex;">
                      <div class="processing_content_detail" style="margin-right: 30px;">
                        <span>审核人&nbsp;&nbsp;<span style="color:#219AFF">{{ getReviewerNameById(orderStep.finalReviewer) }}</span></span>
                      </div>
                      <div class="processing_content_detail">
                        <span><i class="el-icon-time">{{ orderStep.finalReviewerTime}}</i></span>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <div class="processing_content_detail" style="float:left;width:70%">
                        <div style="float:left;width: 2px;height: 20px; background:#C7D4E9;margin-left:10px;margin-right:10px"></div>
                        <span style="color:#919FB8">{{ orderStep.finalReviewerNotes }}</span>
                      </div>
                    </td>
                  </tr>
                </table>
              </div>

            </div>
          </template></el-step>
        </el-steps>
      </div>
    </div>
    <h2>订单审核</h2>
    <div v-if="order">
      <h3>订单信息</h3>
      <el-row :gutter="24">
        <el-col :span="8">
          <span>订单编号: {{ order.orderSn }}</span>
        </el-col>
        <el-col :span="8">
          <span>操作员: {{ order.employee.adminName }}</span>
        </el-col>
        <el-col :span="8">
          <span>创建时间: {{ order.createTime }}</span>
        </el-col>
        <el-col :span="8">
          <span>订单备注: {{ order.notes }}</span>
        </el-col>
      </el-row>
      <h3>客户信息</h3>
      <el-row :gutter="24">
        <el-col :span="8">
          <p>客户名称：{{ order.customer.customerName }}</p>
        </el-col>
        <el-col :span="8">
          <p>联系方式：{{ order.customer.phoneNumber }}</p>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="8">
          <p>客户销售渠道：{{ gettypeNameById(order.customer.typeId) }}</p>
        </el-col>
        <el-col :span="8">
          <p>客户级别：{{ getlabelNameById(order.customer.labelId) }}</p>
        </el-col>
        <el-col :span="8">
          <p>客户来源：{{ getsourceNameById(order.customer.sourceId) }}</p>
        </el-col>
      </el-row>
      <h3>收货信息</h3>
      <el-row :gutter="24">
        <el-col :span="8">
          <p>收货人：{{ order.orderDetail.name }}</p>
        </el-col>
        <el-col :span="8">
          <p>联系方式：{{ order.orderDetail.phone }}</p>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="8">
          <p>所属省份：{{ order.orderDetail.province }}</p>
        </el-col>
        <el-col :span="8">
          <p>所属市：{{ order.orderDetail.city }}</p>
        </el-col>
        <el-col :span="8">
          <p>所属区：{{ order.orderDetail.district }}</p>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="8">
          <p>收货地址：{{ order.orderDetail.detailAddress }}</p>
        </el-col>
      </el-row>
      <h3>发货信息</h3>
      <el-row :gutter="24">
        <el-col :span="8">
      <p>发货方式：{{ order.logisticsMethods }}</p>
        </el-col>
        <el-col :span="8">
      <p>快递公司：{{ order.logisticsCompanies }}</p>
        </el-col>
        <el-col :span="8">
      <p>快递单号：{{ order.trackingNumbe }}</p>
        </el-col>
      </el-row>
      <p>发货备注：{{ order.remarks }}</p>
      <h3>回款信息</h3>
      <p>订单总金额：{{ order.orderAmount }}</p>
      <p>收款凭证:</p>
      <img :src="order.receipt" alt="收款凭证" class="image-container-box" @click="showLargeImage = true">
      <div class="large-image-overlay" v-if="showLargeImage" @click="showLargeImage = false">
        <img :src="order.receipt" alt="收款凭证" class="large-image">
      </div>
      <h3>订单产品信息</h3>

      <el-table :data="productList" style="width: 100%" border>
        <el-table-column prop="productName" label="产品名称" width="149" :align="'center'"></el-table-column>
        <el-table-column prop="picture" label="产品图片" width="150" :align="'center'">
          <template slot-scope="scope">
            <img :src="scope.row.picture" :preview-src-list="[scope.row.picture]" alt="Product Image"
                 style="width: 100px; height: 100px;">
          </template>
        </el-table-column>
        <el-table-column prop="price" label="产品价格" width="120" :align="'center'"></el-table-column>
        <el-table-column prop="costPrice" label="售价" width="120" :align="'center'"></el-table-column>
        <el-table-column prop="orderNum" label="选购数量" width="120" :align="'center'"></el-table-column>
        <el-table-column prop="salePrice" label="成交价" width="120" :align="'center'"></el-table-column>
        <el-table-column prop="orderAmount" label="金额" width="120" :align="'center'"></el-table-column>
      </el-table>
      <h3>审核结果</h3>
      <el-form :model="orderExamine" label-width="100px" ref="orderExamine" :rules="orderExamineRules">
      <el-form-item prop="findingOfAudit" label="审核结果" style="margin-left: -15px">
        <el-radio-group v-model="orderExamine.findingOfAudit">
        <el-radio :label="1">审核通过</el-radio>
        <el-radio :label="2">拒绝</el-radio>
      </el-radio-group>
      </el-form-item>
        <el-form-item style="margin-left: -15px" label="复审人" v-if="orderExamine.findingOfAudit === 1 && order.orderState === 0" prop="intermediateReviewer">
          <!-- 选择待复审人 -->
          <el-select  v-model="orderExamine.intermediateReviewer" placeholder="请选择复审人" >
            <el-option label="林阳阳" :value="377"></el-option>
            <el-option label="侯冬军" :value="380"></el-option>
            <el-option label="李曼曼" :value="379"></el-option>
            <el-option label="屈梦园" :value="390"></el-option>
            <el-option label="毛金雨" :value="387"></el-option>
            <el-option label="吴梦"  :value="389"></el-option>
          </el-select>
          </el-form-item>
        <el-form-item style="margin-left: -15px" label="终审人"v-if="orderExamine.findingOfAudit === 1 && order.orderState === 1" prop="finalReviewer">
          <!-- 选择待终审人 -->
          <el-select  v-model="orderExamine.finalReviewer" placeholder="请选择终审人" >
            <el-option label="林阳阳" :value="377"></el-option>
            <el-option label="侯冬军" :value="380"></el-option>
            <el-option label="李曼曼" :value="379"></el-option>
            <el-option label="屈梦园" :value="390"></el-option>
            <el-option label="毛金雨" :value="387"></el-option>
            <el-option label="吴梦"  :value="389"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="margin-left: -15px" label="初审意见" v-if="order.orderState === 0" prop="juniorReviewerNotes">
          <el-input v-model="orderExamine.juniorReviewerNotes" type="textarea" :rows="2"></el-input>
        </el-form-item>

        <el-form-item style="margin-left: -15px" label="复审意见" v-if="order.orderState === 1" prop="intermediateReviewerNotes">
          <el-input v-model="orderExamine.intermediateReviewerNotes" type="textarea" :rows="2"></el-input>
        </el-form-item>

        <el-form-item style="margin-left: -15px" label="终审意见" v-if="order.orderState === 7" prop="finalReviewerNotes">
          <el-input v-model="orderExamine.finalReviewerNotes" type="textarea" :rows="2"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="examineOrder">提交</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div v-else>
      <p>未找到订单信息</p>
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    activeStep() {
      // 根据订单状态确定当前步骤
      switch (this.order.orderState) {
        case 0:
          return 1; // 第二步
        case 1:
          return 2; // 第三步
        case 7:
          return 3; // 第四步
        default:
          return 1; // 默认到第一步
      }
    },
    orderExamineRules() {
      let rules = {
        findingOfAudit: [
          { required: true, message: '请输入审核意见', trigger: 'change' }
        ]
      };

      switch (this.order.orderState) {
        case 0:
          rules.juniorReviewerNotes = [
            { required: true, message: '请输入初审意见', trigger: 'blur' }
          ];
          break;
        case 1:
          rules.intermediateReviewer = [
            { required: true, message: '请选择中级审核人', trigger: 'blur' }
          ];
          rules.intermediateReviewerNotes = [
            { required: true, message: '请输入中审意见', trigger: 'blur' }
          ];
          break;
        case 7:
          rules.finalReviewer = [
            { required: true, message: '请选择终级审核人', trigger: 'blur' }
          ];
          rules.finalReviewerNotes = [
            { required: true, message: '请输入终审意见', trigger: 'blur' }
          ];
          break;
      }

      return rules;
    }
  },
  data() {
    return {
      showLargeImage: false,
      order: {
        employee: {},
        customer:{},
        orderDetail:{},
      },
      //订单审核进度
      orderStep: [],
      orderExamine:{
        orderSn:'',
        juniorReviewer:'',
        juniorReviewerNotes:'',
        intermediateReviewer:'',
        intermediateReviewerNotes:'',
        finalReviewer:'',
        finalReviewerNotes:'',
        findingOfAudit:'',
        orderState:'',
      },


      // 客户级别
      custoLabel: [],
      // 客户销售渠道
      custoType: [],
      //客户来源
      custoSource: [],
      productList: [],
      orderReviewer: [],
      selectedAuditor: null, // 选中的审核人
      auditComment: '' // 审核备注
    };

  },

  created() {
    this.fetchOrderDetail();
    this.getSerouce();
    this.getType();
    this.getLabel();
    this.getOrderReviewer();
    // 获取动态参数 customerName

  },

  methods: {
    getStepDescription(timeKey, reviewerKey) {
      const time = this.orderStep[timeKey];
      const reviewerId = this.orderStep[reviewerKey];
      const reviewer = this.getReviewerNameById(reviewerId);
      if (time && reviewer) {
        return `审核人：${reviewer}\n审核时间：${time}`;
      } else {
        if (this.activeStep === 0) {
          return '等待初审中';
        } else if (this.activeStep === 1) {
          return '等待复审中';
        } else if (this.activeStep === 2) {
          return '等待终审中';
        }
      }
    },
    fetchOrderDetail() {
      const orderSn = this.$route.params.orderSn; // 获取路由参数或 props
      if (orderSn) {
        this.$http.get(`/orderList/${orderSn}`)
            .then(response => {
              this.order = response.data; // 将获取到的订单详情存储到 order 属性中
            })
            .catch(error => {
              console.error('获取订单详情失败:', error);
            });
        //获取订单产品
        this.$http.post("/orderProducid/" + orderSn).then(res => {
          this.productList = res.data;
        });
        //获取订单审核进度
        this.$http.get(`/orderReviewer/${orderSn}`)
            .then(response => {
              this.orderStep = response.data; // 将获取到的订单详情存储到 order 属性中
            })
      }
      // else {
      //   console.error('未找到该订单编号');
      // }
    },

    //获取客户数据信息
    gettypeNameById(typeId) {
      const category = this.custoType.find(item => item.id === typeId);
      return category ? category.customerType : '';
    },
    getlabelNameById(labelId) {
      const category = this.custoLabel.find(item => item.id === labelId);
      return category ? category.customerLabel : '';
    },
    getsourceNameById(sourceId) {
      const category = this.custoSource.find(item => item.id === sourceId);
      return category ? category.customerSource : '';
    },
    getReviewerNameById(reviewerKey) {
      const reviewer = this.orderReviewer.find(item => item.id === reviewerKey);
      return reviewer ? reviewer.adminName : '';
    },
    //获取类型
    getType() {
      this.$http.get("/customerType").then(res => {
        this.custoType = res.data;
      })
    },
    //获取标签
    getLabel() {
      this.$http.get("/customerLabel").then(res => {
        this.custoLabel = res.data;
      })
    },
    //获取来源
    getSerouce() {
      this.$http.get("/customerSource").then(res => {
        this.custoSource = res.data;
      })
    },
    //获取审核人
    getOrderReviewer() {
      this.$http.get("/employee").then(res => {
        this.orderReviewer = res.data;
      });
    },

    examineOrder: function () {
        this.$refs.orderExamine.validate((valid) => {
          if (valid) {
            this.$confirm('您对该订单的审核结果已选择，提交后不可更改，确认提交吗？', '提示', {}).then(() => {
              this.formLoading = true;
              let para = Object.assign({}, this.orderExamine);
              para.orderSn = this.$route.params.orderSn;
              para.orderState=this.order.orderState;
              this.$http.put("/orderList/Examine", para).then(res => {
                console.log(para)
                if (res.data.success) {
                  this.$message({
                    message: '提交成功',
                    type: 'success'
                  });
                  this.$refs['orderExamine'].resetFields();
                  this.$router.back();
                } else {
                  this.$message.error("系统繁忙，请稍后重试!!!【500】");
                }
                this.formLoading = false;
                this.ExamineFormVisible = false;
              });
            });
          }
        });
      },

    }

};
</script>

<style scoped>
textarea {
  width: 100%;
  height: 100px;
}
.custom-description {
  background-color: #D9E5F9;
  margin-bottom: 12px;
  margin-top: 12px;
  padding: 10px;
}

.large-image-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.large-image {
  max-width: 90%;
  max-height: 90%;
}

.stepComponent{
  background-color:#DFEBFF;
  width: 100%;
  padding: 10px 10px 10px 10px;
  margin: 10px 10px 10px 10px;
}
.stepsTitle{
  margin: 10px 0px  10px  10px ;
}
.approvalProcess{
  color: #9EADC4;
  font-size: 14px;
  /* width: 100%; */
  background:#DFEBFF;


  margin-top:10px;
}
.processing_content{
  background-color: #D9E5F9;
}
.processing_content_detail{
  margin-bottom: 3.5px;

  display:inline-block;
}
.processing_content_detail_time{
  display:inline-block;
}
.step-row{
  min-width:280px;
  margin-bottom:12px;
  margin-top:12px;
}
</style>
